<template>
  <div class="withdraw-list-page page-container">
    <!-- 表格区域 -->
    <div class="content">
      <a-table 
        rowKey="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'amount'">
            ¥{{ record.amount?.toFixed(2) || '0.00' }}
          </template>
          <template v-else-if="column.dataIndex === 'actualAmount'">
            {{ record.actualAmount ? `¥${record.actualAmount.toFixed(2)}` : '-' }}
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { Table, Tag, Icon } from 'ant-design-vue'
import { queryWithdraw } from '@/api/withdrawal'
import { mapGetters } from 'vuex'

export default {
  name: 'WithdrawList',
  components: {
    ATable: Table,
    ATag: Tag,
    AIcon: Icon
  },
  data() {
    return {
      loading: false,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true
      },
      columns: [
        {
          title: '申请金额',
          dataIndex: 'amount',
          key: 'amount',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        {
          title: '实际到账',
          dataIndex: 'actualAmount',
          key: 'actualAmount',
          width: 100,
          align: 'center',
          ellipsis: true
        },
        {
          title: '申请时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: 140,
          ellipsis: true
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          width: 80,
          align: 'center',
          ellipsis: true,
          customRender: (text) => {
            const statusMap = {
              0: { text: '处理中', color: 'blue' },
              1: { text: '已到账', color: 'green' },
              2: { text: '已拒绝', color: 'red' }
            }
            const status = statusMap[text] || { text: '未知', color: 'default' }
            return this.$createElement('a-tag', {
              props: {
                color: status.color
              }
            }, status.text)
          }
        }
      ],
      statusColorMap: {
        0: 'blue',
        1: 'green',
        2: 'red'
      },
      statusTextMap: {
        0: '处理中',
        1: '已到账',
        2: '已拒绝'
      }
    }
  },
  computed: {
    ...mapGetters({
      id: 'user/id'
    })
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleTableChange(pagination) {
      this.pagination = { ...this.pagination, ...pagination }
      this.fetchData()
    },
    async fetchData() {
      this.loading = true
      try {
        const params = {
          userId: this.id,
          pageSize: this.pagination.pageSize,
          pageNo: this.pagination.current
        }
        
        const response = await queryWithdraw(params)
        
        if (response && response.code === 200) {
          this.dataSource = (response.data.data || []).map(item => ({
            ...item,
            status: Number(item.status)
          }))
          this.pagination.total = response.data.totalCount || 0
        } else {
          throw new Error(response?.msg || '获取提现记录失败')
        }
      } catch (error) {
        console.error(error)
        this.$message.error(error.message || '获取提现记录失败')
      } finally {
        this.loading = false
      }
    },
    getStatusColor(status) {
      return this.statusColorMap[status] || 'default'
    },
    getStatusText(status) {
      return this.statusTextMap[status] || '未知'
    }
  }
}
</script>

<style lang="less" scoped>
.withdraw-list-page {
  height: 100%;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    :deep(.ant-table) {
      flex: 1;
      background: #fff;
      border-radius: 8px;
      overflow: auto;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      
      .ant-table-container {
        min-width: 100%;
      }
      
      .ant-table-thead > tr > th {
        background: #fafafa;
        color: #595959;
        font-weight: 500;
        padding: 12px 8px;
        white-space: nowrap;
        font-size: 14px;
      }
      
      .ant-table-tbody > tr > td {
        color: #262626;
        padding: 12px 8px;
        font-size: 14px;
      }
      
      .ant-table-placeholder {
        .ant-empty-description {
          color: #8c8c8c;
        }
      }

      .ant-tag {
        margin: 0;
        padding: 2px 6px;
        font-size: 12px;
        min-width: 60px;
        text-align: center;
      }
    }
  }

  @media screen and (max-width: 768px) {
    .content {
      :deep(.ant-table) {
        font-size: 12px;
        
        .ant-table-thead > tr > th,
        .ant-table-tbody > tr > td {
          padding: 8px !important;
          font-size: 12px;
        }
        
        .ant-tag {
          font-size: 11px;
          padding: 0 4px;
          min-width: 50px;
        }
      }
    }
  }
}
</style> 